<template>
  <div>
    <el-form :inline="true" :model="UserFm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="UserFm.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="UserFm.mobile" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="所属部门">
        <el-input v-model="UserFm.dname" placeholder="所属部门" />
      </el-form-item>
      <el-button @click="handleGetUserList">查询</el-button>
      <el-button type="primary" plain @click="opensave">增加</el-button>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        prop="userId"
        label="用户ID"
        width="180"
      />
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
      />
      <el-table-column
        prop="dname"
        label="所属部门"
      />
      <el-table-column
        prop="email"
        label="邮箱"
        width="180"
      />
      <el-table-column
        prop="mobile"
        label="手机号"
        width="180"
      />
      <el-table-column
        prop="status"
        label="禁用状态"
        width="180"
      >
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="getStatus(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="UserFm.pageNum"
      :page-sizes="[10,15,20]"
      :page-size="UserFm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="UserFm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="saveuserfm" label-width="80px">
          <el-form-item label="Id">
            <el-input v-model="saveuserfm.userId" readonly />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="saveuserfm.username" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="saveuserfm.password" show-password/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="saveuserfm.email" />
          </el-form-item>
          <el-form-item label="住址">
            <el-input v-model="saveuserfm.address" />
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-model="saveuserfm.fax" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="saveuserfm.mobile" />
          </el-form-item>
          <el-form-item label="座机号">
            <el-input v-model="saveuserfm.landlineNumber" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="saveuserfm.remark" />
          </el-form-item>

          <el-form-item label="所属部门：">
            <el-input v-model="saveuserfm.deptName" readonly @focus="deptDialogVisible=true" />
            <el-input v-show="false" v-model="saveuserfm.deptId" />
            <el-dialog
              append-to-body
              :visible.sync="deptDialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-tree ref="dept" node-key="deptId" accordion :data="depts" :props="DeptdefaultProps" @node-click="handleDeptNodeClick" />
              <span slot="footer" class="dialog-footer">
                <el-button @click="deptDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deptDialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
          </el-form-item>

          <el-form-item label="角色">

            <el-checkbox-group  v-model="roleIds" @change="handleSelectCheck">
              <el-checkbox v-for="item in juese" :label="item.roleId" :value="item.roleId">{{ item.rname }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="省市县">
            <el-cascader
              v-model="saveuserfm.cityids"
              :props="prop"
              :options="options"
              placeholder="请选择"
              @change="handleBussinessCircleByRegionId"
            />
          </el-form-item>


          <el-form-item label="商圈">
            <el-checkbox-group  v-model="CircleIds" @change="handleSelectCheck">
              <el-checkbox v-for="item in circles" :label="item" :value="item">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>



          <el-form-item label="状态">
            <el-radio-group v-model="saveuserfm.status">
              <el-radio :label="0" :value="0">禁用</el-radio>
              <el-radio :label="1" :value="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="insertButton" type="primary" @click="preserveuser">保存</el-button>
        <el-button v-if="editButton" type="primary" @click="edit">修改</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
// eslint-disable-next-line no-unused-vars
import * as resp from 'browserslist'

export default {
  name: 'UserList',
  data() {
    return {
      circles:[],
      roleIds:[],
      insertButton: false,
      editButton: false,
      juese: [],
      deptDialogVisible: false,
      DeptdefaultProps: {
        value: 'deptId',
        children: 'childMenus',
        label: 'name'
      },

      loading: true,
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      saveuserfm: {
        cityids:[],
      },
      options: [],
      UserFm: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        username: '',
        mobile: ''
      },
      prop: {
        expandTrigger: 'hover',
        value: 'regionId',
        label: 'regionName',
        children: 'sysRegionDtoList'
      }
    }
  },
  created() {
    this.getpcd()
    this.handleGetUserList()
    this.handleGetDeptList()
  },
  methods: {
    handleSelectCheck(val) {
      this.roleIds = val
      console.log(this.roleIds)
    },
    handleSizeChange(val) {
      this.UserFm.pageSize = val
      this.handleGetUserList()
    },
    handleCurrentChange(val) {
      this.UserFm.pageNum = val
      this.handleGetUserList()
    },
    // ========省市县===========
    getpcd() {
      axios.post('http://localhost:8200/sys/region/selectregion').then((resp) => {
        // alert(JSON.stringify(resp))
        this.options = resp.data.obj
        this.loading = false
      })
    },
    handleGetUserList() {
      axios.post('http://localhost:8200/sys/user/list', this.UserFm).then(res => {
        // console.log(res)
        this.tableData = res.data.obj.list
        this.UserFm.pageNum = res.data.obj.pageNum
        this.UserFm.pageSize = res.data.obj.pageSize
        this.UserFm.total = res.data.obj.total
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // ==========打开增加============
    opensave() {
      /*this.saveuserfm = { cityids: [], roleIds: [] }*/
      this.saveuserfm={},
      this.saveuserfm.cityids=[],
      this.roleIds=[]
      this.insertButton = true
      this.editButton = false
      this.dialogVisible = true
    },
    // 保存增加
    preserveuser() {
      this.saveuserfm.jueseids = this.roleIds
      axios.post('http://localhost:8200/sys/user/save', this.saveuserfm).then((resp) => {
        this.dialogVisible = false
      })
    },
    // ==========打开修改=================
    handleEdit(index, row) {
      this.dialogVisible = true
      //this.saveuserfm = { cityids: [], roleIds: [] }
      this.saveuserfm={}
      this.saveuserfm.cityids=[]
      this.roleIds.length=0
      this.insertButton = false
      this.editButton = true
      // 赋值本条数据
      this.saveuserfm = row
      // 获取根据部门查询角色
      this.getjuese(row)
      // 获取已选角色id
      this.getuserroleids(row)
      //alert(JSON.stringify(this.saveuserfm.jueseids)+"++++++++++++++++++++++++++++++++++++++++++++++")
      this.saveuserfm.jueseids = this.roleIds
      //alert(JSON.stringify(this.saveuserfm.jueseids)+"==============================================")

      // 回显部门id name 省市县
      this.saveuserfm.deptName = row.dname
      this.saveuserfm.deptId = row.deptId
      this.saveuserfm.cityids = [parseInt(row.province), parseInt(row.city), parseInt(row.country)]
    },
    // ============删除==================
    handleDelete(index, row) {
      axios.post('http://localhost:8200/sys/user/delete', row).then((resp) => {
      //  alert(JSON.stringify(resp))
        // eslint-disable-next-line eqeqeq
        if (resp.data.code == 200) {
          alert('删除成功')
          this.handleGetUserList()
        } else {
          alert('删除失败')
        }
      })
    },
    // 根据部门树获取角色
    handleDeptNodeClick(data) {
      this.saveuserfm.deptId = data.deptId
      this.saveuserfm.deptName = data.name
      this.deptDialogVisible = false
      this.getjuese()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.saveuserfm={}
          this.saveuserfm.cityids=[]
          this.roleIds=[]
        })
        .catch(_ => {})
    },
    handleGetDeptList() {
      axios.post('http://localhost:8200/sys/dept/list', { pageSize: 100000 }).then(res => {
        this.depts = res.data.list
        console.log('部门：' + this.depts)
      })
    },
    getjuese() {
      axios.post('http://localhost:8200/sys/role/selRoleByDeptId', this.saveuserfm).then((resp) => {
        // alert(JSON.stringify(resp))
        this.juese = resp.data.obj
        console.log(this.juese)
      })
    },
    // 通过用户id查询中间表获取用户的角色用于回显
    getuserroleids: function(row) {
      axios.post('http://localhost:8200/sys/userrole/seluserrolebyuid', row).then((resp) => {
        if(resp.data.obj.length > 0) {
           for (let i = 0; i < resp.data.obj.length; i++) {
             this.roleIds[i] = resp.data.obj[i].roleId
           }
         }
         if (resp.data.obj.length==0){
           this.roleIds=[]
         }
         //alert(JSON.stringify(this.roleIds)+"=====")
      })
    },
    edit() {
      this.saveuserfm.jueseids = this.roleIds
      axios.post('http://localhost:8200/sys/user/updateuser', this.saveuserfm).then((resp) => {
        // eslint-disable-next-line eqeqeq
        if (resp.data.code == 200) {
          alert('修改成功')
          this.dialogVisible = false
          this.handleGetUserList()
        } else {
          alert('修改失败')
        }
      })
    },

    // 改变状态
    getStatus(row) {
      this.saveuserfm = row
      //alert(JSON.stringify(this.saveuserfm))
      axios.post('http://localhost:8200/sys/user/getstatus', this.saveuserfm).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code == 200) {
          this.handleGetUserList()
        } else {
          alert('加载失败')
        }
      })
    },
    handleBussinessCircleByRegionId(value){
      //alert(JSON.stringify(value))
      axios.post("http://localhost:8200/sys/region/handleBussinessCircleByRegionId",{did:value[2]}).then((resp)=>{
          console.log(JSON.stringify(resp));
          this.circles=resp.data.obj.list;
      })
    }



  }
}
</script>

<style scoped>

</style>
